<!--档案借阅管理-->
<template>
  <div class="borrow-manage">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-jieyue" />
        </div>
        <span>档案借阅管理</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" class="icon-button" @click="borrowClick('add')">新增</a-button>
        <a-button type="primary" icon="retweet" class="icon-button">详情</a-button>
        <a-input-search placeholder="请输入内容" enter-button />
      </div>
      <div class="card-table">
        <div class="borrow-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="borrow-left-tree" v-if="!isShowLeftTree">
            <a-tree
              blockNode
              show-line
              :treeData="treeData"
              defaultExpandAll
              v-if="treeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="borrow-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <splitpanes horizontal>
            <pane size="40">
              <!-- 档案借阅表格 -->
              <el-table
                :data="borrowTableData"
                highlight-current-row
                border
                height="100%"
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <slot v-for="(item,index) in borrowColumns">
                  <el-table-column
                    :key="index"
                    :property="item.field"
                    :label="item.title"
                    :width="item.width"
                    show-overflow-tooltip
                    sortable>
                  </el-table-column>
                </slot>
                <el-table-column label="操作">
                  <template>
                    <a @click="borrowClick('edit')">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="borrowClick('del')">删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </pane>
            <pane size="30">
              <el-table
                :data="tableData"
                highlight-current-row
                border
                height="100%"
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <slot v-for="(item,index) in columns">
                  <el-table-column
                    :key="index"
                    :property="item.field"
                    :label="item.title"
                    :width="item.width"
                    show-overflow-tooltip
                    sortable>
                  </el-table-column>
                </slot>
              </el-table>
            </pane>
            <pane size="30">
              <el-table
                :data="fullTableData"
                highlight-current-row
                border
                height="100%"
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <slot v-for="(item,index) in fullColumns">
                  <el-table-column
                    :key="index"
                    :property="item.field"
                    :label="item.title"
                    :width="item.width"
                    show-overflow-tooltip
                    sortable>
                  </el-table-column>
                </slot>
              </el-table>
            </pane>
          </splitpanes>
        </div>
      </div>
    </a-card>

    <!-- 档案借阅管理弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible"
      width="60%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="借阅编号">
              <a-input v-decorator="[ 'B_Code', {rules: [{ required: true, message: '请输入借阅编号' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="借阅日期">
              <a-date-picker v-decorator="[ 'B_RequestTime', {rules: [{ required: true, message: '请选择借阅日期' }]} ]" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="应还日期">
              <a-date-picker v-decorator="[ 'B_PlanReturnTime' ]" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="归还日期">
              <a-date-picker v-decorator="[ 'B_ReturnTime' ]" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="借阅模式">
              <a-select v-decorator="[ 'B_RequestMode' ]">
                <a-select-option value="1">实物外借</a-select-option>
                <a-select-option value="2">电子借阅</a-select-option>
                <a-select-option value="3">室内借阅</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="借阅目的">
              <a-select v-decorator="[ 'B_RequestPurpose' ]">
                <a-select-option value="1">档案利用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="OA借阅人">
              <a-input v-decorator="[ 'OA_User' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="OA借阅事由">
              <a-input v-decorator="[ 'OA_Reason' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="相关备注"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }">
              <a-input type="textarea" v-decorator="['B_Remark' ]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: 'BorrowManage',
  components: {
    Splitpanes,
    Pane
  },
  data () {
    return {
      isShowLeftTree: false, // 左侧显示与隐藏
      treeData: [
        {
          title: '2018',
          key: '1'
        },
        {
          title: '2019',
          key: '2'
        },
        {
          title: '2020',
          key: '3',
          children: [
            {
              title: '1月',
              key: '4'
            },
            {
              title: '2月',
              key: '5'
            },
            {
              title: '3月',
              key: '6'
            },
            {
              title: '4月',
              key: '7'
            },
            {
              title: '5月',
              key: '8'
            },
            {
              title: '6月',
              key: '9'
            }
          ]
        }
      ],
      modalTitle: '',
      dialogFormVisible: false,
      form: this.$form.createForm(this),
      borrowTableData: [
        {
          B_Code: '123456789',
          B_RequestMode: '实物外借',
          B_RequestPurpose: '档案利用',
          B_User: 'admin',
          B_RequestTime: '2020-09-18',
          B_PlanReturnTime: '2021-09-18',
          B_ReturnTime: '2020-09-18',
          B_Status: '测试数据'
        }
      ],
      borrowColumns: [
        {
          title: '借阅编号',
          field: 'B_Code'
        },
        {
          title: '借阅方式',
          field: 'B_RequestMode'
        },
        {
          title: '借阅目的',
          field: 'B_RequestPurpose'
        },
        {
          title: '借阅人',
          field: 'B_User'
        },
        {
          title: '借阅日期',
          field: 'B_RequestTime'
        },
        {
          title: '应还日期',
          field: 'B_PlanReturnTime'
        },
        {
          title: '归还日期',
          field: 'B_ReturnTime'
        },
        {
          title: '流程状态',
          field: 'B_Status'
        }
      ],
      tableData: [],
      columns: [
        {
          title: '档案门类',
          field: 'Catalog_Name'
        },
        {
          title: '档案分类',
          field: 'Record_Remark'
        },
        {
          title: '日期',
          field: 'Record_DateTime'
        },
        {
          title: '内容描述',
          field: 'SearchContent'
        }
      ],
      fullTableData: [],
      fullColumns: [
        {
          title: '顺序号',
          field: 'AI_Index'
        },
        {
          title: '文件名',
          field: 'AI_Name'
        },
        {
          title: '文件大小',
          field: 'AI_Size'
        },
        {
          title: '上传时间',
          field: 'AI_UploadDateTime'
        },
        {
          title: '创建时间',
          field: 'AI_FileDateTime'
        }
      ]
    }
  },
  created () {},
  mounted () {
  },
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    // 档案借阅管理按钮事件 val代表类型，add：档案借阅新增，edit：档案借阅编辑，del：档案借阅删除
    borrowClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '档案借阅新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '档案借阅编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.borrow-manage {
  width: 100%;
  height: 120%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-head {
      .ant-card-extra {
        width: 50%;
        &>div {
          display: flex;
        }
      }
    }
    .card-table {
      height: 100%;
      .borrow-left {
        float: left;
        width: 18%;
        height: 100%;
        border: 1px solid #EBEEF5;
        border-right: none;
        position: relative;
        transition: all 0.2s;
        .borrow-left-tree {
          height: 100%;
          overflow: auto;
        }
        .handle {
          position: absolute;
          right: -18px;
          top: 50%;
          margin-top: -32px;
          z-index: 100;
          cursor: pointer;
        }
      }
      .borrow-right {
        float: left;
        width: 82%;
        height: 100%;
        transition: all 0.2s;
      }
    }
  }
}
</style>
